<template>
  <div>
    <my-header></my-header>
    <!-- 版头 -->
    <div class="banner">
      <img src="../assets/img/huiBanner1.jpg" alt="" />
      <div class="banner1">
        <img src="../assets/img/ntitle2.png" alt="" />
        <p>您关心的浏览信息一目了然</p>
      </div>
      <div class="banner-di">
        <img src="../assets/img/bor1.png" alt="" />
      </div>
    </div>

    <!-- ************ -->
    <div class="page">
      <div class="container-1">
        <div class="container-fluid">
          <div class="crumbs">
            <div class="cr">
              <a href="/"><img src="/home.png" alt="" /> </a>
              <i></i>
              <span>优惠活动</span>
            </div>
          </div>

          <div class="green-title">
            <h3>
              <img src="/zhua.png" alt="" />
              <p>动物世界的新鲜事</p>
            </h3>
            <ul class="yh-link">
              <li @click="now = 0" :class="{active: now == 0}">
                <p>全部</p>
              </li>
              <li @click="now = 1" :class="{active: now == 1}">
                <p>新闻</p>
              </li>
              <li @click="now = 2" :class="{active: now == 2}">
                <p>优惠信息</p>
              </li>
              <li @click="now = 3" :class="{active: now == 3}">
                <p>主题活动</p>
              </li>
            </ul>
          </div>

          <!-- 卡片 -->
          <!-- <div>{{ now }}</div> -->
          <div class="item-wrap" v-if="data" v-show="now == 0 ? true : false">
            <a href="#" v-for="(x, i) in data.result" :key="i">
              <div class="qu">{{ x.Types }}</div>
              <div
                class="bg"
                :style="`background: url('http://localhost:8080/${x.Image}') no-repeat center; background-size: cover`"
              ></div>

              <div class="tx">
                <h4>{{ x.Title }}</h4>
                <p>{{ x.Digest }}</p>
                <span>{{ x.StartDate }}-{{ x.CreateDate }} </span>
              </div>
            </a>
          </div>
          <div class="item-wrap" v-if="data2" v-show="now == 0 ? false : true">
            <a href="#" v-for="x in data2.result" :key="x.TypeId">
              <div class="qu">{{ x.Types }}</div>
              <div
                class="bg"
                :style="`background: url(${x.Image}) no-repeat center; background-size: cover`"
              ></div>
              <div class="tx">
                <h4>{{ x.Title }}</h4>
                <p>{{ x.Digest }}</p>
                <span>{{ x.StartDate }}-{{ x.CreateDate }} </span>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
  import MyHeader from "@/components/MyHeader.vue";
  import MyFooter from "@/components/MyFooter.vue";
  export default {
    components: {MyHeader, MyFooter},
    data() {
      return {
        now: 0,
        data: null,
        data2: null,
      };
    },

    mounted() {
      this.All_list();
      this.ser_list();
    },
    watch: {
      now() {
        this.ser_list();
      },
    },
    methods: {
      ser_list() {
        let url = `http://127.0.0.1:3000/pro/Journalism/?TypeId=${this.now}`;
        this.axios.get(url).then(res => {
          console.log("ser:", res);
          this.data2 = res.data;
        });
      },
      All_list() {
        let url = "http://127.0.0.1:3000/pro/Journa";
        this.axios.get(url).then(res => {
          console.log(res);
          this.data = res.data;
        });
      },
    },
  };
</script>
<style>
  /* 园区时间 */
  * {
    margin: 0;
    padding: 0;
  }
  .banner {
    display: flex;
    position: relative;
  }
  .banner > img {
    display: block;
    width: 100%;
    /* position: relative; */
  }
  .banner1 {
    /* display: flex; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .banner1 p {
    color: #fff;
    font-size: 33px;
    display: block;
    margin-top: 10px;
  }
  .banner-di {
    position: absolute;
    top: 340px;
  }
  /* *****内容***** */
  .page {
    background: url("../assets/img/wen1.jpg");
  }
  .container-1 {
    width: 1500px;
    margin: 0 auto;
  }
  .container-fluid {
    padding: 20px 15px 0 15px;
    width: 100%;
  }
  .crumbs {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
  .crumbs .cr {
    margin-left: 10px;
    font-size: 14px;
  }
  .crumbs .cr i {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: #a7a6a4;
    margin: 0 7px;
  }
  .crumbs .cr span {
    color: #333;
  }
  .green-title {
    position: relative;
  }
  .green-title h3 {
    justify-content: center;
    display: flex;
    color: #2b4c1d;
    font-size: 42px;
    font-weight: bold;
    margin: 20px 0;
  }
  .green-title h3 p {
    margin-left: 10px;
  }
  .yh-link {
    display: flex;
    justify-content: center;
    list-style: none;
  }
  .yh-link li {
    cursor: pointer;
    color: #fff;
    box-sizing: border-box;
    border-radius: 40px;
    /* line-height: 40px; */
    text-align: center;
    margin: 0 15px;
    background-color: #75400e;
    padding: 10px 30px;
    width: 200px;
    height: 40px;
  }
  .yh-link li.active {
    background-color: #c66001;
  }
  .item-wrap {
    width: 1500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  .item-wrap .qu {
    position: absolute;
    top: 20px;
    left: 15px;
    /* z-index: -99; */
    color: #fff;
    padding: 6px 22px;
    border-radius: 20px;
    font-size: 12px;
  }
  .item-wrap a {
    position: relative;
    margin-top: 30px;
    text-decoration: none;
    width: 470px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
  }
  .item-wrap a:hover > .tx > h4 {
    color: #bc6c15;
  }
  .item-wrap a .bg {
    width: 100%;
    height: 250px;
  }
  .item-wrap .tx {
    padding: 20px;
    background-color: #fff;
  }
  .item-wrap .tx p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #737373;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .item-wrap a .tx h4 {
    font-weight: 500;
    color: #000;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .item-wrap .tx span {
    font-size: 12px;
    color: #999;
  }
</style>
<style lang="scss" scoped></style>
